<script lang="ts" setup>
import { ref, defineEmits } from 'vue';

import { useVbenModal } from '@vben/common-ui';
import { Button, message } from 'ant-design-vue';
import { useDebounceFn } from '@vueuse/core';
import { useVbenForm } from '#/adapter/form';
import { getAttrConfig, saveAttrLog, getDetailAttrValue } from '#/api/common';
const isDisabled = ref(true);
const materialId = ref<Number>();
const routerData = ref<any>({});
const title = ref('填写采购追踪信息');
const emit = defineEmits(['fetch-data']);

const init = async () => {
  let res = await getAttrConfig({
    scene: '1',
  });
  let detailRes = await getDetailAttrValue({
    id: routerData.value.info.id,
    scene: '1',
  });
  // console.log('detailRes', detailRes);
  let schema = res.data.map((item: any) => {
    if (item.type == '2') {
      return {
        component: 'Select',
        label: item.name,
        fieldName: item.code,
        componentProps: () => {
          return {
            options: item.attr_values.map((option: any) => {
              return {
                label: option.value,
                value: (String(option.id)),
              };
            }),
          };
        },
      };
    } else if (item.type == '3') {
      return {
        component: 'DatePicker',
        label: item.name,
        fieldName: item.code,
        componentProps: {
          format: 'YYYY-MM-DD',
          valueFormat: 'YYYY-MM-DD',
          placeholder: '请选择' + item.name,
        },
      };
    } else {
      return {
        component: 'Input',
        label: item.name,
        fieldName: item.code,
        componentProps: {
          placeholder: '请输入' + item.name,
        },
      };
    }
  });
  formApi.setState({ schema: schema });
  formApi.setValues(detailRes);
};

const handleClose = async () => {
  modalApi.close();
};

async function onSubmit() {
  const { valid } = await formApi.validate();
  if (valid) {
    formApi.submitForm;
    modalApi.lock();
    let savedata = await formApi.getValues();
    try {
      await saveAttrLog({
        form_data: savedata,
        id: routerData.value.info.id,
        scene: '1',
      });
      message.success('保存成功');
      modalApi.close();
      emit('fetch-data');
    } finally {
      modalApi.lock(false);
    }
  }
}

const [Modal, modalApi] = useVbenModal({
  class: 'w-4/5',
  appendToMain: true,
  destroyOnClose: true,
  showConfirmButton: false,
  showCancelButton: false,
  onOpened() {
    // console.log('onOpened');
  },
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      routerData.value = modalApi.getData<Record<string, any>>();
      init();
    }
  },
});

const [Form, formApi] = useVbenForm({
  commonConfig: {
    componentProps: {
      class: 'w-full',
    },
  },
  showDefaultActions: false,

  layout: 'horizontal',
  schema: [],
  wrapperClass: 'grid-cols-4',
});
</script>

<template>
  <Modal :title="title">
    <Form />
    <template #prepend-footer>
      <Button type="primary" @click="onSubmit()">保存</Button>
    </template>
  </Modal>
</template>
